<!--
 * @Author: 陈迪秀 1170776994@qq.com
 * @Date: 2024-02-25 08:38:18
 * @LastEditors: 陈迪秀 1170776994@qq.com
 * @LastEditTime: 2024-03-01 14:32:55
 * @FilePath: \vite-project\src\components\echarts-map\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import { chainData } from "./busData";
import { chaincitiesJson } from "./mapJson/china-cities";
//  按需引入 echarts
import * as echarts from "echarts";
const props = defineProps({
  params: {
    type: Object,
    required: true,
    default: null,
  },
  activeName: {
    type: String,
    required: false,
    default: "",
  },
});
const echartsInstance1 = ref<any>(null);
const resizeFn = () => {
  echartsInstance1.value.resize();
};
const init = async (
  name: string,
  mapData: any = null,
  busData: Array<any> = []
) => {
  await echarts.registerMap(name, mapData);
  echartsInstance1.value = echarts.init(document.querySelector(".echarts1"));
  echartsInstance1.value.setOption({
    // 设置标题和副标题及副标题跳转链接
    title: {
      show: false,
      text: "产业资源地图",
      subtext: "遍布全国的产业资源地图",
      // sublink: 'https://news.qq.com//zt2020/page/feiyan.htm'
      left: "center",
    },
    // 数据提示框
    tooltip: {
      trigger: "item", // item放到数据区域触发
      formatter: `{b}<br/>${props.activeName}{c}家`, // 提示数据格式br表示换行，地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
    },
    // 工具栏
    toolbox: {
      show: true,
      orient: "horizontal",
      left: "right",
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {},
      },
    },
    // 分段映射方案：
    // visualMap默认是连续映射，我们也可以设置为分段型，对于分布范围广的数据
    // 使用透明度来区分疫情严重情况
    visualMap: {
      show: false,
      type: "piecewise",
      backgroundColor: "red",
      pieces: [
        { gt: 1500, color: "#A7CCFE" }, // (1500, Infinity]
        { gt: 1000, lte: 1500, color: "#A7CCFE", colorAlpha: 1 }, // (1000, 1500]
        { gt: 500, lte: 1000, color: "#A7CCFE", colorAlpha: 0.8 },
        { gt: 300, lte: 500, color: "#A7CCFE", colorAlpha: 0.6 },
        { gt: 100, lte: 300, color: "#A7CCFE", colorAlpha: 0.4 },
        { gt: 50, lte: 100, color: "#A7CCFE", colorAlpha: 0.3 },
        { lt: 50, color: "#A7CCFE", colorAlpha: 0.2 }, // (-Infinity, 100)
      ],
    },
    // 具体数据
    series: [
      {
        name: "各省确诊病例", // 系列名称
        type: "map", // 系列类型，地图
        map: name, // 要使用的地图，即上面注册的地图名称
        roam: true, // 开启鼠标缩放和平移漫游
        label: {
          // 图形上的文本标签，地图默认显示数据名
          show: true,
          formatter: "{b}", // b是数据名，c是数据值
          fontSize: 12,
          color: "#1678ff",
        },
        data: busData,
        itemStyle: {
          //    # 在未设置dataRange或	visualMap时设置有效
          normal: {
            borderColor: "#fff",
            // borderWidth: 0.8,
            areaColor: {
              type: "linear-gradient",
              x: 0,
              y: 300,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#E6EEFF", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#E6EEFF",
                },
              ],
              global: true, // 缺省为 false
            },
          },
          emphasis: {
            shadowColor: "rgba(0, 0, 0, 1)",
            shadowBlur: 10,
            shadowOffsetX: 5,
            shadowOffsetY: 5,
            areaColor: {
              type: "linear-gradient",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  // color: "rgba(243, 174, 48, 0)", // 0% 处的颜色
                  color: "#9DC7FF", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#9DC7FF",
                },
              ],
            },
          },
        },
      },
    ],
  });
  window.addEventListener("resize", resizeFn);
};
//
const chinaCitiesFilter = async (params: any) => {
  let provinceCities: any = JSON.parse(JSON.stringify(chaincitiesJson));
  let features: any = [];
  provinceCities.features.forEach((element: any) => {
    if (params.data.zipCode == element.id.substring(0, 2)) {
      features.push(element);
    }
  });
  provinceCities.features = features;
  return provinceCities;
};
// 释放内存
onUnmounted(() => {
  echartsInstance1.value.dispose();
  window.addEventListener.bind(null, "resize", resizeFn);
});
onMounted(async () => {
  const cities = await chinaCitiesFilter(props.params);

  await init("chinaCities", cities, chainData);
});
</script>

<template>
  <div class="echarts1" style="width: 1088px; height: 630px"></div>
</template>

<style scoped></style>
